<template>
  <div class="dy-main resk-eva">
    <div class="dy-header">
      <x-header title="风险评估" :left-options="{preventGoBack:true}" @on-click-back="back"></x-header>
    </div>
    <div class="dy-body">
      <ul>
        <li v-for="(questionList, questionListIndex) in questionLists" :key="questionListIndex">
          <div class="question">
            <h4 class="caption">{{questionList.title}}</h4>
            <div class="question-item" v-for="(List, listIndex) in questionList.option" :key="listIndex">
              <div class="radio-container" @click="select(List,listIndex,questionListIndex)">
                <p class="radio" :class="(result[questionListIndex].answer===listIndex+1)?'checked':''"></p>
                <p class="item-content">{{List}}</p>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <button class="submit" @click="submit">提交</button>
      <zx-dialog v-model="success" title="评测结果" butType="button" :data="['确认']" tipsmsg="你当前得风险评估能力为五级，属于有投资经验的进取型投资者" @on-click-yes="clickYes"></zx-dialog>
    </div>
    <!--<div class="dy-footer"></div>-->
  </div>
</template>
<script>
import { Actionsheet, Toast, Icon, Panel } from 'vux'
export default{
  components: {
    Actionsheet,
    Toast,
    Icon,
    Panel
  },
  data () {
    return {
      questionLists: [{
        title: '1.您的年龄介于',
        option: [
          'A.18-29周岁',
          'B.30-54周岁',
          'C.55周岁至64周岁',
          'D.65周岁',
          'E.75周岁以上'
        ]
      }, {
        title: '2.您每年平均总收入是多少(人民币)？',
        option: [
          'A.200000(含)或以下',
          'B.200000-500000(含)',
          'C.500000-1000000(含)',
          'D.1000000以上'
        ]
      }, {
        title: '3.您主要收入来源是什么？',
        option: [
          'A.工资、劳务报酬',
          'B.生产经营所得',
          'C.利息、股息、转让等金融性资产收入',
          'D.出租、出售房地产等非金融性资产收入',
          'E.无固定收入'
        ]
      }, {
        title: '4.您主要收入来源是什么？',
        option: [
          'A.工资、劳务报酬',
          'B.生产经营所得',
          'C.利息、股息、转让等金融性资产收入',
          'D.出租、出售房地产等非金融性资产收入',
          'E.无固定收入'
        ]
      }, {
        title: '5.您主要收入来源是什么？',
        option: [
          'A.工资、劳务报酬',
          'B.生产经营所得',
          'C.利息、股息、转让等金融性资产收入',
          'D.出租、出售房地产等非金融性资产收入',
          'E.无固定收入'
        ]
      }],
      result: [{ quesNo: 0, answer: 0 }], // 选题结果
      success: false // 弹框
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    /**
     * 点击选项
     * @param {number} listIndex 点击的下标
     * @param {number} questionListIndex 第几题
     */
    select (list, listIndex, questionListIndex) {
      let _this = this
      // _this.result[questionListIndex].answer = listIndex + 1
      _this.result.splice(questionListIndex, 1, {quesNo: listIndex, answer: listIndex + 1})
      console.log(this.result)
    },
    submit () {
      let notAnswer = []
      for (let i = 0, length = this.result.length; i < length; i++) {
        if (this.result[i].answer === 0) {
          notAnswer.push(i + 1)
        }
      }
      if (notAnswer.length > 0) {
        notAnswer.join(',')
        console.log('还有第' + notAnswer + '题未答')
      } else {
        this.success = true
      }
    },
    clickYes () {
      this.success = false
    }
  },
  created () {
    let _this = this
    for (let i = 0, length = this.questionLists.length; i < length; i++) {
      _this.result[i] = { quesNo: i, answer: 0 }
    }
    console.log(this.result)
  }
}
</script>
<style lang="less">
.resk-eva{
  .dy-body{
    overflow: auto;
    .question{
      width: 100%;
      padding:.2rem .3rem .1rem;
      background-color: #ffffff;
      margin-bottom: .1rem;
      .caption{
        margin-bottom: .1rem;
      }
      .question-item{
        width: 100%;
        margin-bottom: .1rem;
        .radio-container{
          display: -webkit-box;
          width: 100%;
          .radio{
            position: relative;
            top: .05rem;
            width: .3rem;
            height: .3rem;
            border: .01rem solid #bfbfbf;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            &.checked:after{
              content:'';
              display: block;
              position: absolute;
              top: .05rem;
              left: .05rem;
              width: .18rem;
              height: .18rem;
              -webkit-border-radius: 50%;
              -moz-border-radius: 50%;
              border-radius: 50%;
              background-color: #000;
            }
          }
          .item-content{
            flex-grow: 1;
            margin-left: .1rem;
            overflow:hidden;
            word-wrap: break-word;
            word-break: normal;
          }
        }
      }
    }
    .submit{
      width: 80%;
      height: .8rem;
      text-align: center;
      color: #ffffff;
      margin:.5rem 10%;
      background-color: blue;
    }
  }
  //zx-buttom属性
  .zx-dialog{
    .button{
      border: none;
      height: 1.3rem;
      .btn{
        justify-content: center;
        li{
          height: .8rem;
          background-color: blue;
          color: #fff;
          text-align: center;
          line-height: .8rem;
          flex: .7;
          left: 15%
        }
      }
    }
  }
}
</style>
